<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SimpleUI 示例中心--dialog</title>
		<meta name="description" content="SimpleUI是一个基于jQuery的组件库，适合用于构建web2.0的应用程序和小型网站" />
		<meta name="keywords" content="jQuery js simple ui simpleUI web application" />
        <link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/SyntaxHighlighter.css"/>
        <link type="text/css" rel="stylesheet" href="../css/core.css"/>
        <link type="text/css" rel="stylesheet" href="../../src/_beta/SimpleDialog/SimpleDialog.css"/>
        <style type="text/css">
            .demo-area {
                padding: 10px;
                border: 1px solid #eee;
                background: #fbfbfb;
                height: 100px;
            }
            
            .drag-demo {
                position: relative;
                width: 100px;
                height: 100px;
                border: 1px solid #ddd;
                background: #f6f6f6;
            }
            
            .drag-demo h2 {
                margin: 5px;
                color: #fff;
                background: #839CF7;
                padding: 3px 5px;
                text-align: center
            }
            
            .demo-mail {
                float: left;
                width: 120px;
            }
            
            .demo-mail li {
                line-height: 25px;
                border-bottom: 1px solid #ddd;
                padding-left: 10px;
                cursor: pointer;
            }
            
            .mail-list {
                margin-left: 140px;
            }
            
            .mail-list table {
                width: 600px;
            }
            
            .mail-list td {
                border: 1px solid #ddd;
                height: 25px;
                padding-left: 10px;
            }
            
            .drag-proxy {
                background: red;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                text-align: center;
                color: #fff;
            }
            
            .demo-mail em {
                margin-left: 10px;
                color: red
            }
            
            .mail-list td span {
                cursor: move;
                vertical-align: middle;
            }
            
            .mail-list td * {
                vertical-align: middle;
            }
            
            .simple-show {
                padding: 30px 100px;
            }
            
            #complex {
                height: auto;
                overflow: hidden;
            }
            
            #complex li {
                float: left;
                margin-left: 10px;
                display: inline;
                width: 200px;
                height: 100px;
                overflow: hidden;
            }
            
            .simple-img-example .simple-dialog-content {
                text-align: center;
                padding: 10px;
            }
            
            .simple-img-example .simple-dialog-btn-wrap {
                padding-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container clearfix" id="hd">
            <h1 class="s-logo"></h1>
            <div class="s-nav">
                <span class="s-nav-l"></span>
                <span class="s-nav-r"></span>
                <ul class="clearfix">
                    <li class="current">
                        <a href="/doc/doc.html">文档</a>
                    </li>
                    <li>
                        <a href="/doc/demo.html">示例</a>
                    </li>
                    <li>
                        <a href="http://code.google.com/p/simple-ui/downloads/list">下载</a>
                    </li>
                    <li>
                        <a href="/doc/deploy.html">部署</a>
                    </li>
					<li>
                        <a href="http://www.iqianduan.org/t-191-1-1.html" target="_blank">论坛</a>
                    </li>
                    <li>
                        <a href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container" id="bd">
            <h2 class="s-title">SimpleUI示例中心</h2>
            <div class="clearfix doc-content demo-content">
                <div class="api-content">
                    <h2 class="api-name">Simple Dialog Demo</h2>
                    <h3 class="api-guide">简单示例</h3>
                    <textarea name="code" class="js">
                        $("<div class='simple-show'>test</div>").dialog();
                        $.alert("警告示例",function(){
                        });
                        $.confirm("确认示例",function(){
                        });
                        $.ajaxDialog("../../src/_beta/SimpleDialog/ajax.html")
                    </textarea>
                    <div class="demo-area">
                        <button id="dialog-show">
                            弹出普通
                        </button>
                        <button id="dialog-alert">
                            警告框
                        </button>
                        <button id="dialog-confirm">
                            确认框
                        </button>
                        <button id="dialog-ajax">
                            加载远程页面
                        </button>
                    </div>
                    <h3 class="api-guide">复杂示例(图片浏览器)</h3>
                    <p>
                        在这个示例中，我们通过flicker图片分享网站的API获取图片，并将这个图片通过定制的SimpleDialog显示出来
                    </p>
                    <div class="demo-area" id="complex">
                    </div>
                    <textarea name="code" class="js">
var getImgRemote = function(){
    $.ajax({
        url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
        jsonpCallback: "jsonFlickrFeed",
        success: function(r){
            var ul = $("<ul/>");
            $.each(r.items, function(k, v){
                var li = $("<li/>");
                li.append("<img src='" + v.media.m + "'/>").appendTo(ul);
            });
            $("#complex").append(ul);
            bindEvents();
        },
        dataType: "jsonp"
    });
}
var bindEvents = function(){
    $("#complex li").each(function(i){
        var length = $("#complex li").length, current = i;
        $(this).click(function(){
            var d = $(this).find("img").dialog({
                buttons: {
                    "上一张": function(){
                        if (current == 0) {
                            alert("已经是第一张");
                            return;
                        }
                        current--;
                         setImg(dialog,current);
                    },
                    "下一张": function(){
                        if (current == length) {
                            alert("已经是最后一张");
                            return;
                        }
                        current++;
                        setImg(dialog,current);
                    },
                    "关闭": function(){
                        dialog.destroy();
                    }
                },
                title: "简单图片浏览器"
            }), dialog = d.data("widget_dialog");
            dialog.dialog.addClass("simple-img-example")
        });
    })
}
var setImg = function(dialog, index){
    var img = $("#complex li").eq(index).find("img");
    dialog.body.find("img").attr('src', img[0].src).animate({
        width: img.width(),
        height: img.height()
    }, 300);
}
getImgRemote();
                    </textarea>
                </div>
            </div>
        </div>
        <script src="../SyntaxHighlighter/shCore.js">
        </script>
        <script src="../SyntaxHighlighter/allmin.js"></script>
        <script type="text/javascript" src="../../src/jquery.js">
        </script>
		 <script type="text/javascript">
           $(function(){
                dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
                dp.SyntaxHighlighter.HighlightAll('code');
            })
        </script>
        <script type="text/javascript" src="../../src/_beta/SimpleCore.js">
        </script>
        <script type="text/javascript" src="../../src/_beta/SimpleDrag/SimpleDrag.js">
        </script>
        <script type="text/javascript" src="../../src/_beta/SimpleDialog/SimpleDialog.js">
        </script>
        <script type="text/javascript">
            (function(){
                var ajaxHtmlStore = {}, getHtml = function(url){
                    var temp;
                    if (ajaxHtmlStore[url]) {
                        $(".api-content").html(ajaxHtmlStore[url]);
                        dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
                        dp.SyntaxHighlighter.HighlightAll('code');
                    }
                    else {
                        $.get(url, function(res){
                            ajaxHtmlStore[url] = res;
                            $(".api-content").html(ajaxHtmlStore[url]);
                            dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
                            dp.SyntaxHighlighter.HighlightAll('code');
                        });
                    }
                }
                $("#dialog-show").click(function(){
                    $("<div class='simple-show'>test</div>").dialog();
                })
                $("#dialog-alert").click(function(){
                    $.alert("警告示例", function(){
                    });
                });
                $("#dialog-confirm").click(function(){
                    $.confirm("确认示例", function(){
                    });
                });
                $("#dialog-ajax").click(function(){
                    $.ajaxDialog("../../src/_beta/SimpleDialog/ajax.html")
                });
                
                var getImgRemote = function(){
                    $.ajax({
                        url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
                        jsonpCallback: "jsonFlickrFeed",
                        success: function(r){
                            var ul = $("<ul/>");
                            $.each(r.items, function(k, v){
                                var li = $("<li/>");
                                li.append("<img src='" + v.media.m + "'/>").appendTo(ul);
                            });
                            $("#complex").append(ul);
                            bindEvents();
                        },
                        dataType: "jsonp"
                    });
                }
                var bindEvents = function(){
                    $("#complex li").each(function(i){
                        var length = $("#complex li").length, current = i;
                        $(this).click(function(){
                            var d = $(this).find("img").dialog({
                                buttons: {
                                    "上一张": function(){
                                        if (current == 0) {
                                            alert("已经是第一张");
                                            return;
                                        }
                                        current--;
                                         setImg(dialog,current);
                                    },
                                    "下一张": function(){
                                        if (current == length) {
                                            alert("已经是最后一张");
                                            return;
                                        }
                                        current++;
                                        setImg(dialog,current);
                                    },
                                    "关闭": function(){
                                        dialog.destroy();
                                    }
                                },
                                title: "简单图片浏览器"
                            }), dialog = d.data("widget_dialog");
                            dialog.dialog.addClass("simple-img-example")
                        });
                    })
                }
                var setImg = function(dialog, index){
                    var img = $("#complex li").eq(index).find("img");
                    dialog.body.find("img").attr('src', img.attr("src")).animate({
                        width: img.width(),
                        height: img.height()
                    }, 300);
                }
                getImgRemote();
            })();
        </script>
		<span style="display:none"><script src="http://s24.cnzz.com/stat.php?id=3606083&web_id=3606083"></script></span>
    </body>
</html>
